Adding a custom button is as simple as adding some markup and a little bit of JavaScript anywhere on the web page. In this example below, we will look at adding a button to the Viewer in a way that matches the design language and code style of the existing HTML5 Viewer.

If you are not yet familiar with the code structure, refer to these topics:

• Modifying viewer.js
• Creating a Custom Tab

In this topic, we will add a button to the default View tab which will add an Approved stamp redaction to the top right of the first page in the document.

Adding the Button HTML

The bulk of the viewer markup is inside the file viewerTemplate.html; this includes all the toolbars and vertical slide-outs.

If you would like to add buttons to the context menu, the annotations saving dialog, or the print dialog, these are found in separate files.

The View tab appears at the top of the document, and is identified by the data attribute data-pcc-nav-tab="view". Inside the .pcc-tab-pane, the actual menu bar, there are two lists of buttons. One is the normal list starting from the left, .pcc-left, and the second is the buttons floating on the right side, .pcc-pull-right. To add the button on the right side:

<div class="pcc-pull-right">
    <button class="myCustomApprovedButton">Approve</button>
    <button class="pcc-icon pcc-icon-print" data-pcc-print="launch"></button>
    <button data-pcc-download class="pcc-icon pcc-icon-download"></button>
</div>

You've added the button in bold to the rest of the list, to appear first in the right-hand side buttons.

Adding the Custom JavaScript

Associating logic to the buttons is handled in the viewer.js file.

First, find the button in the DOM. Toward the top of the file, there is a property on the viewer, this.viewerNodes, which holds all of the viewer DOM elements. Add the button to the end of the list:

...
    $searchBeginsWith: viewer.$dom.find("[data-pcc-search=beginsWith]"),
    $searchEndsWith: viewer.$dom.find("[data-pcc-search=endsWith]"),
    $searchWildcard: viewer.$dom.find("[data-pcc-search=wildcard]"),
    $customApproved: viewer.$dom.find(".myCustomApprovedButton")
};

We have used a variable name starting with a $, the global name of jQuery, to indicate that this is a jQuery-wrapped variable. Any time a variable name starts with a $ in this file, it indicates that the object is able to use the entire jQuery API.

Second, add logic to the button’s click event. A few lines down from this section is the function bindMarkp, where logic is added to the DOM nodes. To keep with convention, go all the way to the bottom of this function, and add the click handler there:

viewer.viewerNodes.$customApproved.on("click", function (ev) {
    // get the first page attributes
    viewer.viewerControl.requestPageAttributes(1).then(
        function success(attributes) {
            // let's add a stamp now
            var mark = viewer.viewerControl.addMark(1, "StampRedaction");
            // set the stamp text
            mark.setLabel("Approved");
            // set the stamp location
            mark.setRectangle({
                width: 180,
                height: 50,
                x: attributes.width - 200,
                y: 20
            });
        },
        function failed(error) {
            // :( tell the user there was an error
            alert(error);
        });
});

Styling the Button

First, add a new custom icon to the CSS vocabulary. To support all browsers and screen types, you will need two icons: a 26x26 pixel icon, and a 40x40 pixel icon. For this example, let’s assume that you have icons already created, named check.png and check@2x.png, respectively and the icons are available in the images folder.

The HTML5 Viewer uses an icon sprite in order to optimize icon image loading. In this example, you will not be using the sprite, and instead include standalone images.

Toward the top of the viewer.css file, there are the icon definitions, in the form of .pccv .pcc-icon-.... You will add the new icon at the end of this section:

.pccv .custom-icon-check { background-image: url(../img/check.png); }

Note that to support IPS screens, you will need to add a second icon inside the @media (min-width:0) media query. This media query targets all modern browsers capable of scaling icons, to ensure that any high density screen attached to a browser (that can scale icons) will get high resolution images. Here, you will add out 2x icon image:

.pccv .custom-icon-check {
    background-image: url(../img/check@2x.png);
    background-size: 26px;
    background-position: center;
}

Finally, update your HTML markup to use this new icon instead of text:

<button class="myCustomApprovedButton pcc-icon custom-icon-check"></button>

You have completed adding a custom button.

©2014. Accusoft Corporation. All Rights Reserved.